<template>
  <div class="menu-edit">
    <el-dialog
      v-bind="$attrs"
      :title="state.dialogTitle"
      v-model="state.modalVisible"
      :before-close="cancelDialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      class="menu-dialog"
      draggable
    >
      <el-form ref="menuRef" :model="state.form" :rules="state.rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parent_id">
              <el-tree-select
                v-model="state.form.parent_id"
                :data="menuTreeData"
                :props="{value: 'menu_id', label: 'remark', children: 'children'}"
                value-key="menu_id"
                placeholder="选择上级菜单"
                check-strictly
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menu_name">
              <el-input v-model="state.form.menu_name" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由唯一键" prop="menu_key">
              <el-input v-model="state.form.menu_key" placeholder="请输入路由唯一键" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="component">
              <template #label>
                <span>
                  <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  组件路径
                </span>
              </template>
              <el-input v-model="state.form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="path">
              <template #label>
                <span>
                  <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  路由地址
                </span>
              </template>
              <el-input v-model="state.form.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限类型" prop="menu_type">
              <el-radio-group v-model="state.form.menu_type">
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
                <el-radio :label="4">api接口</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识" prop="perms">
              <el-input v-model="state.form.perms" placeholder="请输入权限标识" maxlength="100" />
              <template #label>
                <span>
                  <el-tooltip content="控制器中定义的权限字符，用于按钮级别的权限控制，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  权限标识
                </span>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" prop="no_cache">
              <template #label>
                <span>
                  <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  是否缓存
                </span>
              </template>
              <el-radio-group v-model="state.form.no_cache">
                <el-radio :label="0">缓存</el-radio>
                <el-radio :label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单显示" prop="visible">
              <template #label>
                <span>
                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  菜单显示
                </span>
              </template>
              <el-radio-group v-model="state.form.visible">
                <el-radio :label="0">显示</el-radio>
                <el-radio :label="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标Icon" prop="icon">
              <template #label>
                <span>
                  <el-tooltip content="系统中显示的图标，具体就是开发文件中svg文件名称" placement="top">
                    <el-icon>
                      <question-filled />
                    </el-icon>
                  </el-tooltip>
                  图标Icon
                </span>
              </template>
              <el-input v-model="state.form.icon" placeholder="请输入图标代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="state.editView.menu_type !== 4">
            <el-form-item label="显示排序" prop="order_num">
              <el-input-number v-model="state.form.order_num" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限11备注" prop="remark">
              <el-input v-model="state.form.remark" placeholder="请输入权限备注" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口地址" prop="api_url">
              <el-input v-model="state.form.api_url" placeholder="请输入接口地址" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="权限参数" prop="api_parameter">
              <el-input type="textarea" :rows="5" v-model="state.form.api_parameter" placeholder="请输入权限参数" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ClickOutside as vClickOutside} from 'element-plus'
import useSystemManageStore from '@store/modules/systemManage'
import {filterObject} from '@/utils/index'

const systemManageStore = useSystemManageStore()
const {proxy} = getCurrentInstance()
const menuRef = ref(null)

let menuTreeData = inject('menuTree')

const state = reactive({
  modalVisible: false,
  dialogTitle: '',
  editView: {},
  form: {
    active_menu: '',
    component: '',
    hidden_header: '',
    hiddewn_children: '',
    icon: '',
    menu_id: '',
    menu_key: '',
    menu_name: '',
    menu_type: '',
    no_cache: '',
    order_num: 0,
    parent_id: '',
    path: '',
    perms: '',
    redirect: '',
    remark: '',
    target: '',
    visible: '',
    api_url: '',
    api_parameter: ''
  },
  rules: {
    menu_name: [{required: true, message: '菜单名称不能为空', trigger: 'blur'}],
    order_num: [{required: true, message: '菜单顺序不能为空', trigger: 'blur'}],
    parent_id: [{required: true, message: '上级菜单不能为空', trigger: 'blur'}],
    menu_type: [{required: true, message: '权限类型不能为空', trigger: 'blur'}],
    visible: [{required: true, message: '菜单显示不能为空', trigger: 'blur'}],
    no_cache: [{required: true, message: '是否缓存不能为空', trigger: 'blur'}]
  }
})

const emits = defineEmits(['refresh'])

const getDataView = async (menu_id) => {
  const result = await systemManageStore.menuDetail({
    ['menu_id.Value']: menu_id
  })
  state.form = filterObject(result, Object.keys(state.form))
  state.editView = result
}

const submitDialog = () => {
  menuRef.value.validate(async (valid) => {
    if (valid) {
      if (Object.keys(state.editView).length) {
        state.form.menu_id = state.editView.menu_id
        state.form['menu_id.value'] = state.editView.menu_id
        console.log(state.form)
        await systemManageStore.menuUp(state.form)
        proxy.$modal.msgSuccess('修改成功！')
      } else {
        await systemManageStore.menuAdd(state.form)
        proxy.$modal.msgSuccess('新增成功！')
      }
      state.editView = {}
      menuRef.value.resetFields()
      emits('refresh')
      state.modalVisible = false
    }
  })
}

const cancelDialog = () => {
  state.editView = {}
  menuRef.value.resetFields()
  state.modalVisible = false
}

const openDialog = async (data = {}) => {
  if (Object.keys(data).length) await getDataView(data.menu_id)
  state.modalVisible = true
  state.dialogTitle = Object.keys(data).length ? `编辑【${data.remark}】` : '新增'
}

defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
